<template>
  <div class="arcgis-map-wrapper" :style="{ height: layoutHeight + 'px'}">
    <arc-gis-map
      :tools="['switch-map', 'full-screen']"
      :graphicsData="graphicsData"
      :centerPoint="[117.17144639449873, 31.83296921125205]"
      @clickGraphic="getParams"
    />
  </div>
</template>

<script>
import ArcGisMap from '@/components/ArcgisMap/ArcgisMap'
import { mapState } from 'vuex'

export default {
  components: { ArcGisMap },
  data () {
    return {
      // 图形数据
      graphicsData: [
        {
          paths: [
            [117.129359, 31.839979],
            [117.128810, 31.839979],
            [117.128810, 31.832240],
            [117.227610, 31.833600]
          ],
          color: '#1e80ff',
          width: 5,
          id: 'Hello world'
        },
        {
          lng: 117.129359,
          lat: 31.839979,
          markerUrl: require('@/assets/img/view-start.png'),
          width: '32px',
          height: '48px',
          id: 'Foo'
        },
        {
          lng: 117.227610,
          lat: 31.833600,
          markerUrl: require('@/assets/img/view-end.png'),
          width: '32px',
          height: '48px',
          id: 'Bar'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      layoutHeight: state => state.layoutHeight
    })
  },
  methods: {
    getParams (e) {
      this.$message.info(JSON.stringify(e))
    }
  }
}
</script>

<style lang="less" scoped>
.arcgis-map-wrapper {
  width: 100%;
  height: 100%;
}
</style>
